<!-- 首页九宫格 -->
<template>
  <div class="container">
    <div style="position: fixed;width: 100%;top: 0;background: #fff;">
      <!-- <van-nav-bar
        title="报表"
        left-arrow
        left-text="返回"
        right-text="下载报表"
        @click-left="onClickLeft"
        @click-right="excelDownloadChange"
      /> -->
      <!-- 引入公共头部组件 -->
      <HeaderMenu
        title="报表文件"
        rightText="下载文件"
        leftText="返回"
        @rightEvent="excelDownloadChange"
      />
    </div>

    <!-- 报表下载列表数据 -->
    <div class="excel" style="width: 100%;padding-bottom: 50px;">
      <!--   -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoading"
      >
        <div
          class="excelItem"
          v-for="item in excelListData"
          :key="item.FileName"
        >
          <div class="excelTitle" style="font-size:15px">
            <span>文件名称:</span>
            <span> {{ item.FileName }}</span>
          </div>
          <div class="excelListItem">
            <span>文件类型:</span>
            <span> {{ item.FileType }}</span>
          </div>
          <div class="excelListItem">
            <span>文件大小:</span>
            <span>{{ item.FileSize }}</span>
          </div>
          <div class="excelListItem">
            <span>创建时间:</span>
            <span>{{ item.FileCreateTime }}</span>
          </div>
          <div class="excelListItem">
            <span>最后修改时间:</span>
            <span>{{ item.FileLastWriteTime }}</span>
          </div>
          <div class="excelListItem button">
            <!-- <van-button size="mini" style="margin-top: 12px;" type="primary"
              >下载</van-button
            > -->
            <button class="submitDownButton" @click="submitDownButton">
              下载
            </button>
          </div>
        </div>
        <van-divider />
      </van-list>
    </div>

    <TreeFolder :model="treeData" :showPopup="showPopup" @itemClick="itemClick"/>
  </div>
</template>

<script>
const treeData = {
  title: "报表文件目录",
  children: [
    {
      title: "Java架构师"
    },
    {
      title: "JS高级",
      children: [
        {
          title: "ES6"
        },
        {
          title: "动效"
        }
      ]
    },
    {
      title: "Web全栈",
      children: [
        {
          title: "Vue训练营",
          expand: true,
          children: [
            {
              title: "组件化"
            },
            {
              title: "源码"
            },
            {
              title: "docker部署"
            }
          ]
        },
        {
          title: "React",
          children: [
            {
              title: "JSX"
            },
            {
              title: "虚拟DOM"
            }
          ]
        },
        {
          title: "Node"
        }
      ]
    }
  ]
};
import { Icon, Grid, GridItem, Divider } from "vant";
// 引入公共头部组件
import HeaderMenu from "../../components/VolHeaderMenu.vue";
import TreeFolder from "./treeFolder.vue";
export default {
  components: {
    "van-icon": Icon,
    "van-grid": Grid,
    "van-grid-item": GridItem,
    "van-divider": Divider,
    TreeFolder,
    HeaderMenu
  },
  data() {
    return {
      curNameId: 0,
      // 报表文件递归组件数据

      treeData: treeData,
      // 是否列表加载
      loading: false,
      // 是否加载完成
      finished: true,

      // 是否弹窗
      showPopup: false,
      // 报表下载列表数据
      excelListData: [],
      // 每一个用户下的报表文件数据
      fileDirectoryInfo: []
    };
  },
  created() {
    // 获取报表下载目录数据
      this.getExcelListData();
    //     获取每一个用户下报表文件信息
      this.getFileDirectoryInfo();
  },
      methods: {
            itemClick(item) {
                  alert('调用了',item)
            
      },
      
    openForm(item) {
      this.$emit("editfn", item);
    },
    /**
     * 点击复选框操作
     * @param {*} id 父级item的id
     * @param {*} pid 子集的pid
     */
    clickBox(id, pid) {
      if (id) {
        // this.activeNames.push(id)
        // this.activeChildrenNames.push(id)
      }
      this.$emit("changebox", id, pid);
    },
    // 返回到上一页
    onClickLeft() {
      this.$router.back();
    },
    // 下载报表点击事件
    excelDownloadChange() {
      // this.$refs.downLoadExcel.showPopup = true;
      this.showPopup = true;
    },

    //   报表列表点击下载
    submitDownButton() {},

    nodeClick(val) {
      this.curNameId = val.id;
      this.$set(val, "curNameId", this.curNameId);
      alert("父组件成功调用", val);
    },

    //   列表加载
    onLoading() {},
    getExcelListData() {
      this.http
        .post("/Base_Manage/Home/GetReportFileInfos?folderPath=/ReportFile", {
          folderPath: "/ReportFile"
        })
        .then(res => {
          if (res.Success) {
            // this.excelListData = res.Data;
          } else {
            Toast(res.Msg);
          }
        });
    },
    getFileDirectoryInfo() {
      this.http
        .post(
          "/Base_Manage/Home/GetReportFileDirectoryInfo?folderPath=/ReportFile"
        )
        .then(res => {
          if (res.Success) {
            this.treeData.children = res.Data;
            // this.$refs.downLoadExcel.excelDownLoadList= this.fileDirectoryInfo
            //     this.list = res.Data.length;
            //     for (var i = 0; i < res.Data.length; i++){
            //       this.list= res.Data[i]
            //     }
          } else {
            Toast(res.Msg);
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding-top: 50px;
  /* 覆盖van-button的默认样式 */
  .van-button {
    padding: 0 10px 0 10px !important;
    position: relative;
  }
  .excel {
    .excelItem {
      // box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
      margin: 15px;
      // border-radius: 10px;
      border-bottom: 1px solid #e3e1e1;
      padding-bottom: 10px;
      .excelTitle {
      }
      .excelListItem,
      .excelTitle {
        //   margin-bottom: 8px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
      }
      .excelListItem.button {
        display: flex;
        justify-content: flex-end;
      }
      .submitDownButton {
        width: 15%;
        padding: 8px 0;
        color: #fff;
        font-size: 10px;
        border: none;
        background-color: #1989fa;
        border-radius: 5px;
        margin-top: 10px;
      }
    }
  }
}
</style>
